<template>
    <div class="app-container">

        <div class="mb8">
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addRow">新增行</el-button>
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addFiveRow">新增5行</el-button>
        </div>
        <el-table :data="TabelData" border @cell-click="clickCell" :row-class-name="tableRowClassName"
            :cell-class-name="tableCellClassName" @keydown.native="handleKeydown" stripe style="width: 100%"
            ref="detailTable">
            <el-table-column label="序号" align="center" width="70">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="姓名" stripe prop="Name" align="center">
                <template slot-scope="scope">

                    <el-input size="small" v-focus v-if="scope.row.index === activeCellIndex[0] &&
                        scope.column.index === activeCellIndex[1]
                        " v-model="scope.row.Name" @keyup.enter.native="nextCol()"></el-input>
                    <div v-else>{{ scope.row.Name }}</div>
                </template>
            </el-table-column>

            <el-table-column label="性别" prop="Sex" align="center">
                <template slot-scope="scope">
                    <el-select v-if="scope.row.index === activeCellIndex[0] &&
                        scope.column.index === activeCellIndex[1]
                        " v-model="scope.row.Sex" placeholder="性别" size="small" v-focus @change="nextCol"
                        @keyup.enter.native="nextCol" style="width: 100%" filterable>
                        <el-option label="男" value="男"> </el-option>
                        <el-option label="女" value="女"> </el-option>
                    </el-select>
                    <div v-else>{{ scope.row.Sex }}</div>
                </template>
            </el-table-column>

            <el-table-column label="年龄" prop="Age" align="center">
                <template slot-scope="scope">
                    <el-input v-focus v-if="scope.row.index === activeCellIndex[0] &&
                        scope.column.index === activeCellIndex[1]
                        " size="small" @keyup.enter.native="nextCol" v-model="scope.row.Age" />
                    <div v-else>{{ scope.row.Age }}</div>
                </template>
            </el-table-column>


            <el-table-column label="备注" prop="Desc" align="center">
                <template slot-scope="scope">
                    <el-input v-focus v-if="scope.row.index === activeCellIndex[0] &&
                        scope.column.index === activeCellIndex[1]
                        " v-model="scope.row.Desc" size="small" @keyup.enter.native="nextRow()" />
                    <div v-else>{{ scope.row.Desc }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-plus" plain circle size="small"
                        @click="addRowIndex(scope.$index)"></el-button>
                    <el-button type="danger" icon="el-icon-minus" plain circle size="small"
                        @click="delRow(scope.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>
  
<script>

export default {
    name: "FocusTable",

    data() {
        return {
            TabelData: [],
            activeCellIndex: [], //当前点击单元格

        };
    },

    created() {
        this.reset();

    },
    methods: {
        // 增加一行
        addRow() {
            const row = {
                Name: "", //
                Age: "",
                Desc: "",
                Sex: "", //性别
            };
            this.TabelData.push(row);
        },
        addFiveRow() {
            for (let i = 0; i < 5; i++) {
                this.addRow();
            }
        },
        // 删除指定行
        delRow(index) {
            this.TabelData.splice(index, 1);
        },
        // 指定位置插入行
        addRowIndex(index) {
            const row = {
                Name: "", //
                Age: "",
                Desc: "",
                Sex: "", //性别
            };
            this.TabelData.splice(index + 1, 0, row);
        },


        reset() {
            this.TabelData = [];
            this.addFiveRow()
        },

        // 自动切换到下一列
        nextCol() {
            let next = [this.activeCellIndex[0], this.activeCellIndex[1] + 1];
            console.log(next);
            this.activeCellIndex = next;
        },
        // 自动切换到下一行首列
        nextRow() {
            console.log("下一行");
            let next = [this.activeCellIndex[0] + 1, 1];
            console.log(next);

            this.activeCellIndex = next;
        },
        // 把每行的索引放进row中
        tableRowClassName({ row, rowIndex }) {
            row.index = rowIndex;
        },
        // 把每列的索引放进column中
        tableCellClassName({ column, columnIndex }) {
            column.index = columnIndex;
        },
        // 手动聚集到单元格
        clickCell(row, column) {
            // console.log(row, column);
            this.activeCellIndex = [row.index, column.index];
        },
        // 键盘上下左右箭头键控制单元格切换
        handleKeydown(event) {
            const { keyCode } = event;
            const [rowIndex, colIndex] = this.activeCellIndex;

            switch (keyCode) {
                case 37: // 左箭头
                    if (colIndex > 0) {
                        this.activeCellIndex = [rowIndex, colIndex - 1];
                    }
                    break;
                case 38: // 上箭头
                    if (rowIndex > 0) {
                        this.activeCellIndex = [rowIndex - 1, colIndex];
                    }
                    break;
                case 39: // 右箭头
                    if (rowIndex < this.TabelData.length && colIndex < this.getTableColumnCount() - 1) {
                        this.activeCellIndex = [rowIndex, colIndex + 1];
                    }
                    break;
                case 40: // 下箭头
                    if (rowIndex < this.TabelData.length - 1) {
                        this.activeCellIndex = [rowIndex + 1, colIndex];
                    }
                    break;
            }
        },
        getTableColumnCount() {
            return this.$refs.detailTable.columns.length;
        },
    },
    //自定义指令 借助这个聚焦 .focus()没用
    directives: {
        focus: {
            inserted: function (el) {
                el.querySelector("input").focus();
                el.querySelector("input").select();
            },
        },
    },
};
</script>
  
<style scoped>


</style>
  